<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
      /*   
        当一个HTML元素产生事件时，该事件会在当前元素与根元素之间按特定的顺序传播，所有经过的节点都会收到该事件并执行，这个传播过程就是DOM事件流。
        分类:事件冒泡、事件捕获
        事件冒泡：当一个元素上的事件被触发时，事件从事件源开始，往上冒泡直到页面的根元素，这一过程被称为事件冒泡（默认方式） 
            特点：先触发子级元素的事件，再触发父级元素的事件
            注意：一般绑定事件的方式，采用的是都是事件冒泡

        
     */

        window.onload=function(){
            // var mydiv=document.getElementById("mydiv");
            // var myp=document.getElementById("myp");
            // mydiv.onclick=function(){
            //     alert("div");
            // };
            // myp.onclick=function(e){//事件对象
            //     alert("p");
            //     e.stopPropagation();//阻止事件冒泡
            // };

        //     mydiv.addEventListener("click",function(){
        //         alert("div");
        //     });
        //     myp.addEventListener("click",function(){
        //         alert("p");
        //     });
        };

      /*   
      事件捕获：当一个元素上的事件被触发时，事件从页面的根元素开始，往下直到事件目标元素，这一过程被称为事件捕获
        特点:先触发父级元素的事件，再触发子级元素的事件
        注意：可以使用addEventListenter()进行事件绑定
        addEventListener("事件类型",函数,布尔值)
        布尔值为false或者省略不写时候，默认使用的是事件冒泡
        布尔值为true的时候，表示的事件捕获 
        
    */
        window.onload=function(){
            var mydiv=document.getElementById("mydiv");//DOM对象
            var myp=document.getElementById("myp");//DOM对象
            mydiv.addEventListener("click",function(e){//事件对象
                alert("div");
                e.stopImmediatePropagation();//阻止事件捕获
            },true);

            myp.addEventListener("click",function(){
                alert("p")
            },true);

        };

        function f1(e){
            console.log(2);
            e.preventDefault();//阻止事件的默认行为
        }

        function f2(e){
            console.log(3);
            e.preventDefault();//阻止事件的默认行为
        }
    </script>
</head>
<body>
    <div onclick="alert(333)">
        <p onclick="alert(222)">
            <span onclick="alert(111)">哈哈</span>
        </p>
    </div>
    <div id="mydiv">
        <p id="myp">this is p</p>
    </div>
    <a href="https://www.baidu.com" onclick="f1(event)">百度一下</a>
    <input type="button"  value="按钮" oncontextmenu="f2(event)">
</body>
</html>